<template>
  <div class="search">
    <div class="bottomplay">
      <iframe
        @click="lyrics"
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        width="330"
        height="86"
        :src="
          '//music.163.com/outchain/player?type=2&height=66&id=' +
          this.$store.state.songID.songid
        "
      ></iframe>
    </div>
    <!--    <div class="placeholder"></div>-->
    <div class="head">
      <Header v-if="this.$route.meta.showHeader"
        ><form action="/" class="headerIcon">
          <van-search
            v-model="value"
            show-action
            autofocus="true"
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="beforeRouterLeave"
            @input="onInput"
            @focus="onFocus"
          /></form
      ></Header>
      <van-list v-show="value && notjump">
        <van-cell
          v-for="item in suggestlist"
          :key="item.keyword"
          :title="item.keyword"
          icon="search"
          @click="onSearch(item.keyword)"
        />
      </van-list>
    </div>

    <router-view v-if="contains"></router-view>
    <div class="search-contains" v-if="this.$route.meta.searchPageShow">
      <div class="container" v-show="contains">
        <!--搜索历史-->
        <div class="history">
          <span>历史</span>
          <div class="historybtn">
            <button
              v-for="item in historyList"
              :key="item"
              @click="onSearch(item)"
            >
              {{ item }}
            </button>
          </div>
          <van-icon name="delete-o" @click="removeHistory" />
        </div>
        <!--热搜-->
        <div class="hotSearch">
          <h5>热搜榜</h5>
          <hr />
          <div class="hot-list">
            <span
              @click="onSearch(item.searchWord)"
              v-for="(item, index) in hotList"
              :key="item.score"
              ><i :class="index <= 2 ? 'morehot' : ''">{{ index + 1 }} </i
              >{{ item.searchWord
              }}<van-icon v-show="index == 2" name="back-top" /><i
                v-show="index % 3 == 0"
                style="color: red"
                >HOT</i
              ></span
            >
            <div class="more" v-show="hotListMore" @click="showMoreHot">
              点击展开更多<van-icon name="arrow-down" />
            </div>
          </div>
        </div>
        <!--分类-->
        <div class="classify">
          <h5>音乐分区</h5>
          <div class="tag">
            <div
              class="block"
              style="background: linear-gradient(to right, #615650, #9b908a)"
            >
              <p>歌手分类</p>
            </div>
            <div
              class="block"
              style="background: linear-gradient(to right, #ab362d, #a77069)"
            >
              <div class="top">
                <p>曲风分类</p>
                <van-icon name="live" />
              </div>
              <div class="bottom">查查你的专属曲风偏好</div>
            </div>
            <div
              class="block"
              style="background: linear-gradient(to right, #9c394e, #9b908a)"
            >
              <div class="top">
                <p>ACG专区</p>
                <van-icon name="live" />
              </div>
              <div class="bottom">测测你是ACG大粉头吗</div>
            </div>
            <div
              class="block"
              style="background: linear-gradient(to right, #a03f53, #a78483)"
            >
              <div class="top">
                <p>曲风分类</p>
                <van-icon name="live" />
              </div>
              <div class="bottom">查查你的专属曲风偏好</div>
            </div>
            <div
              class="block"
              style="background: linear-gradient(to right, #583d97, #836ca0)"
            >
              <div class="top">
                <p>曲风分类</p>
                <van-icon name="live" />
              </div>
              <div class="bottom">查查你的专属曲风偏好</div>
            </div>
            <div
              class="block"
              style="background: linear-gradient(to right, #9d6334, #9b908a)"
            >
              <div class="top">
                <p>曲风分类</p>
                <van-icon name="live" />
              </div>
              <div class="bottom">查查你的专属曲风偏好</div>
            </div>

            <!--遮罩-->
            <div class="hidden-block" v-show="classifyMore">
              <div class="wrap">
                <div class="more" @click="showMoreBlock">
                  点击展开更多<van-icon name="arrow-down" />
                </div>
              </div>
              <div
                class="hblock"
                style="background: linear-gradient(to right, #615650, #9b908a)"
              >
                <p>曲风分类</p>
                <van-icon name="live" />
              </div>
              <div
                class="hblock"
                style="background: linear-gradient(to right, #615650, #9b908a)"
              >
                <p>曲风分类</p>
                <van-icon name="live" />
              </div>
            </div>

            <!--          v-show="!classifyMore"-->
            <div class="moreBlock" v-show="!classifyMore">
              <div
                class="block"
                style="background: linear-gradient(to right, #615650, #9b908a)"
              >
                <div class="top">
                  <p>曲风分类</p>
                  <van-icon name="live" />
                </div>
                <div class="bottom">查查你的专属曲风偏好</div>
              </div>
              <div
                class="block"
                style="background: linear-gradient(to right, #615650, #9b908a)"
              >
                <div class="top">
                  <p>曲风分类</p>
                  <van-icon name="live" />
                </div>
                <div
                  class="bottom"
                  style="
                    background: linear-gradient(to right, #615650, #9b908a);
                  "
                >
                  查查你的专属曲风偏好
                </div>
              </div>
              <div
                class="block"
                style="background: linear-gradient(to right, #615650, #9b908a)"
              >
                <div class="top">
                  <p>曲风分类</p>
                  <van-icon name="live" />
                </div>
                <div class="bottom">查查你的专属曲风偏好</div>
              </div>
              <div
                class="block"
                style="background: linear-gradient(to right, #615650, #9b908a)"
              >
                <div class="top">
                  <p>曲风分类</p>
                  <van-icon name="live" />
                </div>
                <div class="bottom">查查你的专属曲风偏好</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" src="//music.163.com/outchain/player?type=2&id=468490424&auto=0&height=66" class="playframe" @click="hhah"></iframe>-->
  </div>
</template>

<script>
import Header from "../../components/Header";
import { hotSearchApi, searchSuggestApi } from "../../api/search";
import { debounce } from "../../utils/debounce";
import {
  getLocalStorge,
  setLocalStorage,
  removeLocalStorge,
} from "../../utils/history";

// import {mapGetters,mapActions} from

export default {
  name: "Search",
  components: { Header },
  data() {
    return {
      value: "",
      contains: true,
      suggestlist: "",
      historyList: [],
      hotList: [],
      hotListMore: true,
      classifyMore: true,
      notjump: true,
      songid: null,
    };
  },
  created() {
    this.getHistory(); //获取搜索历史
    this.getHotSearch(); //获取热搜列表
    this.initid(); //初始化播放id
  },
  methods: {
    lyrics() {
      console.log(111);
      this.$router.push("/lyrics");
    },
    initid() {
      this.songid = this.$store.state.songID.songid;
    },
    onFocus() {
      this.notjump = true;
      if (this.$router.path == "/search/searchResult") {
        this.contains = false; //隐藏所有
      }
    },
    beforeRouterLeave() {
      if (this.$route.path == "/search/searchResult") {
        this.$router.push("/search");
      } else if (this.$route.path == "/search") {
        this.$router.push("/find");
      }
    },
    getHistory() {
      this.historyList = getLocalStorge("searchHistory");
    },
    removeHistory() {
      removeLocalStorge("searchHistory");
      this.historyList = [];
    },
    onSearch(item) {
      if (item) {
        this.value = item;
      }
      let historyArr = [];
      const history = getLocalStorge("searchHistory");
      if (history) {
        //有本地数据则读取并写入
        historyArr = getLocalStorge("searchHistory");
        historyArr.forEach((item, index) => {
          if (item == this.value) {
            historyArr.splice(index, 1); //删除数组中重复的元素
          }
        }); //数组去重
        historyArr.unshift(this.value);
        this.historyList = historyArr;
        //只保留最近十条搜索历史
        if (historyArr.length >= 10) {
          historyArr = historyArr.slice(0, 9);
        }
        setLocalStorage("searchHistory", historyArr);
      } else {
        //无数据则重新push
        historyArr.push(this.value);
        setLocalStorage("searchHistory", historyArr);
      }
      this.notjump = false; //跳转
      this.contains = true; //没有输入

      this.$router.push({
        path: "/search/searchResult",
        query: {
          keywords: this.value,
        },
      });
      console.log(this.value);
    },
    onInput: debounce(async function () {
      if (this.value && this.notjump) {
        this.contains = false; //正在输入
        const inputParams = {
          keywords: this.value,
          type: "mobile",
        };
        const res = await searchSuggestApi(inputParams);
        this.suggestlist = res.data.result.allMatch;
      } else {
        this.contains = true;
      }
    }),
    /* onChange: debounce(async function () {
      if (this.$router.path == "/search/searchResult") {
        const inputParams = {
          keywords: this.value,
          type: "mobile",
        };
        const res = await searchSuggestApi(inputParams);
        this.suggestlist = res.data.result.allMatch;
      }
    }),*/

    async getHotSearch() {
      const result = await hotSearchApi();
      this.hotList = result.data.data.slice(0, 10);
    },
    async showMoreHot() {
      const result = await hotSearchApi();
      this.hotList = result.data.data;
      this.hotListMore = false;
    },
    showMoreBlock() {
      this.classifyMore = false;
    },
  },
};
</script>

<style scoped>
.headerIcon {
  width: 95%;
}
.header {
  width: 100%;
  height: 10%;
}

/*整个搜索页面*/
.search {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}
/*搜索历史展示*/
.container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}
.history {
  /*width: 80%;*/
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.2rem;
  height: 0.4rem;
  padding: 0 0.1rem;
  white-space: nowrap;
}
.historybtn {
  width: 90%;
  overflow-x: scroll;
  display: flex;
  flex-wrap: nowrap;
}
.historybtn button {
  font-size: 0.2rem;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  background: #dfdfdf;
  border-radius: 0.1rem;
  margin: 0 0.08rem;
  height: 0.3rem;
  line-height: 0.3rem;
  padding: 0 0.05rem;
  border: none;
  outline: none;
}
/*
.van-button {
  font-size: 0.2rem;
  height: 0.3rem;
  margin: 0 0.1rem;
}*/
.hotSearch {
  margin: 0.2rem 0.1rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: left;
}
h5 {
  font-size: 0.2rem;
}
.hot-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.hot-list span {
  font-size: 0.2rem;
  width: 50%;
  margin: 0.08rem 0;
}
/*热搜文字*/
.morehot {
  color: red;
}
/*更多*/
.more {
  width: 100%;
  text-align: center;
  font-size: 0.18rem;
  color: #5a5959;
}
.classify .tag {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.moreBlock {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.block {
  font-size: 0.2rem;
  border-radius: 0.1rem;
  width: 45%;
  margin: 0.1rem;
  height: 1rem;
  background: red;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.block .top,
.hblock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70%;
  width: 100%;
  box-sizing: border-box;
  padding-right: 10%;
}
.block .top p,
.hblock p {
  margin-left: 20%;
}
.block .bottom {
  height: 30%;
}
.wrap {
  width: 100%;
  height: 1rem;
  background: linear-gradient(
    to top,
    rgba(12, 12, 12, 1),
    rgba(12, 12, 12, 0.6)
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  left: 0;
}
.hidden-block {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 0.7rem;
  position: relative;
}
.hblock {
  width: 45%;
  margin: 0.1rem;
  height: 0.7rem;
  font-size: 0.2rem;
  border-radius: 0.1rem;
  font-size: 0.2rem;
  border-radius: 0.1rem;
}
.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
/*!*顶部占位元素*!*/
/*.placeholder {*/
/*  height: 0.5rem;*/
/*  width: 100%;*/
/*}*/

.van-search {
  height: 0.5rem;
  overflow: hidden;
}
/*
.van-cell {
  height: 0.3rem;
  position: relative;
}
.van-field__body {
  position: absolute;
  left: 0;
  top: -0.3rem;
}
*/
.bottomplay {
  position: fixed;
  width: 100%;
  height: 1.5rem !important;
  background: #2c3e50;
  bottom: 0;
  left: 0;
  font-size: 0.2rem;
  z-index: 9;
}
.bottomplay iframe {
  height: 100%;
  width: 100%;
}
.van-icon-back-top {
  font-size: 0.2rem;
  color: red;
  margin: 0;
}
.van-icon {
  font-size: 0.3rem;
}
</style>
